<template>
	<view class="home_bg">
		<view class="head_main" style="background-image:linear-gradient(to right,#00828A, #4CA7AD);">
			<view style="padding-top:95rpx;padding-left:20rpx;padding-bottom:35rpx;">
				<u-icon name="https://resourse.cnlhjt.com/upload/20220825/6f2c18c510a1fa3545ac28656475b3d4.png" label="龙海智慧物业" labelColor="#fff" space="6">
				</u-icon>
			</view>
		</view>
		<view style="height:155rpx;"></view>
		<view class="wrap" style="background-color:#f8f8f8;margin-top:0;">
			<view style="height: 30rpx;"></view>
			<view style="background-color: #fff;border-radius:20rpx;">
				<view class="u-rela">
					<u-swiper border-radius="40" height="160" imgMode="aspectFill" style="margin-top: 20rpx; margin-bottom: 20rpx;" @click="intoBanner" indicator indicatorMode="dot" :list="bannerList" keyName="image">
					</u-swiper>
					<!-- <view v-if="isLogin && user.type==0" class="u-abso dis_inl_blo" style="bottom:15rpx;left:20rpx;border-radius:30rpx;color:#fff;background-color: rgba(0, 0, 0, 0.5);padding:5rpx 20rpx;">访客：{{user.home}}</view> -->
					<view v-if="isLogin && user.type==1" class="u-abso dis_inl_blo intro_i">业主：{{user.home}}</view>
					<view v-if="isLogin && user.type==2" class="u-abso dis_inl_blo intro_i">家人：{{user.home}}</view>
					<view v-if="isLogin && user.type==3" class="u-abso dis_inl_blo intro_i">租户：{{user.home}}</view>
					
				</view>
				
				<view style="padding-bottom: 20rpx; margin-top: 20rpx;">
					<u-grid :border="false" col="5">
						<u-grid-item :customStyle="{marginBottom:20+'rpx'}"
							v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
							<u-icon :customStyle="{paddingTop:20+'rpx'}" @click="navInto(baseListItem.method)"
								:name="baseListItem.icon" size="45" style="border-radius: 20rpx;"
								:label="baseListItem.name" labelPos="bottom" labelColor="#363636" space="5"
								labelSize="13">
							</u-icon>
						</u-grid-item>
					</u-grid>
					<u-toast ref="uToast" />
				</view>
				<view class=""
					style="margin: 10rpx 0rpx 10rpx;border-top:1rpx solid #eee;padding-top:10rpx;padding-bottom:10rpx;">
					<image class="notice_img va_m" mode="aspectFill" src="https://resourse.cnlhjt.com/upload/20220825/2745b1814680becdb6f961e918d4623e.png"></image>
					<view style="width:85%;display:inline-block;vertical-align:middle;">
						<u-notice-bar icon=" " :text="notice" url="/pagesHome/notice/notice" duration="3000" step color="#333" bgColor="#fff"
							style="margin-left:25rpx;">
						</u-notice-bar>
					</view>

					<!-- <image class="u-abso notice_img" style="" src="https://s1.ax1x.com/2022/07/27/vpdrrt.png"></image> -->
				</view>
			</view>




			<!-- 龙庭管家 -->
			<view class="uni-flex-center">
				<view class="main-service uni-cell-90">
					<view class="title">
						<u-image :src="appTitle.kjgn" width="80" height="30" mode="aspectFit"></u-image>
					</view>
					<view class="user-list">
						<view class="user-list-cell" style="margin:10rpx 0 0;padding-bottom:0">
							<view class="u-flex u-row-between"
								style="width: 100%; height: auto;border-radius: 20rpx; padding-bottom: 20rpx;">
								<view class="g_list" v-for="(item,index) in oneKey" :key="index">
									<u-icon :customStyle="{paddingTop:20+'rpx'}" @click="quick(item.method)"
										:name="item.icon" size="30" style="border-radius: 20rpx;" :label="item.name"
										labelPos="bottom" labelColor="#363636" space="6" labelSize="24rpx">
									</u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 龙庭社圈 -->
			<view class="uni-flex-center">
				<view class="main-service uni-cell-90" style="margin-top:0;">
					<view class="title" style="margin-bottom:10rpx;">
						<view style="display: flex; ">
							<u-image :src="appTitle.ltsq" width="80" height="30" mode="aspectFit"></u-image>
							<text
								style="color: #999999; font-weight: 400;font-size: 28rpx; line-height: 56rpx;text-align: right; width:100%;"
								@click="moreCommunity" v-if="isCommunity==true">更多
								<!-- <u-icon style="display: inline-block !important;" name="arrow-right" color="#999999" size="14"></u-icon> -->
							</text>
						</view>


					</view>
					<u-swiper border-radius="10" @click="moreCommunity" :list="bannerCommunityList" keyName="image">
					</u-swiper>
				</view>
			</view>

			<!-- 邻里共享 -->
			<view class="uni-flex-center">
				<view class="main-service uni-cell-90">
					<view class="title">
						<view style="display: flex; ">
							<u-image :src="appTitle.llgx" width="80" height="30" mode="aspectFit"></u-image>
							<text
								style="color: #999999; font-weight: 400;font-size: 28rpx; line-height: 56rpx;text-align: right; width:100%;"
								@click="moreShare" v-if="isCommunity==true">更多
								
							</text>
						</view>
					</view>
					<view class="user-list">
						<view class="user-list-cell" style="margin:10rpx 0;">
							<view style="width:48%;color:#fff;border-radius: 20rpx;overflow: hidden;" v-for="(item, index) in near" :key="index">
								<view class="icon" @click="shareItem(item)" style="position: relative;height: 300rpx;width: 100%; ">
									<u-icon width="100%" height="165" :name="item.image" mode="widthFix"
										:customStyle="{borderRadius: '20rpx', zIndex: '1', position: 'absolute', top: '0rpx'}">
									</u-icon>
									<u-image src="https://resourse.cnlhjt.com/upload/20220825/0e0730a4fd0e419f9bd56f64d4e5b48d.png" width="100%" height="190"
										mode="aspectFill"
										:customStyle="{position: 'absolute', top: '0px', zIndex: '9', borderBottomLeftRadius: '20rpx', borderBottomRightRadius: '20rpx'}">
									</u-image>

									<view
										style="color: #fff; width: 96%; font-size: 28rpx; font-weight: 800; text-align: left;z-index: 999;position: absolute;bottom: 20rpx;left:20rpx;">
										{{item.name}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 邻里商城 -->
			<view class="uni-flex-center" v-if="isshop==true">
				<view class="main-service uni-cell-90">
					<view class="title">
						<view style="display: flex; ">
							<u-image :src="appTitle.llsc" width="80" height="30" mode="aspectFit"></u-image>
							<text
								style="color: #999999; font-weight: 400;font-size: 28rpx; line-height: 56rpx;text-align: right; width:100%;"
								@click="moreShop(0)" v-if="isCommunity==true">更多
							</text>
						</view>
						<!-- 邻里商城
						<view style="color: #999999; font-weight: 400;font-size: 28rpx; float: right;"
							@click="moreShop(0)">更多
						</view> -->

					</view>
					<view class="user-list">
						<view class="user-list-cell" @click="moreShop(1)" style="margin:10rpx 0;">
							<view class="item">
								<view class="icon u-rela" style="border-radius: 10rpx;overflow: hidden;">
									<u-icon width="340rpx" height="300rpx" :name="shop[0].image"></u-icon>
									<view class="u-abso"
										style="color:#fff;bottom:20rpx;padding-left:20rpx;font-weight:bold;">
										{{shop[0].name}}
									</view>
								</view>
							</view>
							<view class="item">
								<view class="icon">
									<view class="u-rela" style="border-radius: 10rpx;overflow: hidden;">
										<u-icon width="340rpx" height="140rpx" :name="shop[1].image"></u-icon>
										<view class="u-abso"
											style="color:#fff;bottom:20rpx;padding-left:20rpx;font-weight:bold;">
											{{shop[1].name}}
										</view>
									</view>
									<view style="margin-top: 20rpx;border-radius: 10rpx;overflow: hidden;" class="u-rela">
										<u-icon width="340rpx" height="140rpx" :name="shop[2].image"></u-icon>
										<view class="u-abso"
											style="color:#fff;bottom:20rpx;padding-left:20rpx;font-weight:bold;">
											{{shop[2].name}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- v-if="isshop==true" -->
			<view v-if="isshop==true"> 
				<view class="house_con">
					<view class="title">
						<view style="display: flex; ">
							<u-image src="https://resourse.cnlhjt.com/upload/20221220/57656bda43ea3b6032d6d94f3b0fb165.png" width="80" height="30" mode="aspectFit"></u-image>
							<text style="color: #999999; font-weight: 400;font-size: 28rpx; line-height: 56rpx;text-align: right; width:100%;"> 
							</text>
						</view>
					
					</view>
					<view style="display: flex;margin-top:10rpx;justify-content: space-between;">
						<view class="house_guang" @click="tohouseRent">
							<text class="dis_blo" style="font-size: 33rpx;font-weight: bold;padding:20rpx 0 10rpx;">安选保障</text>
							<text>假赔好礼 租金不涨押金包退等</text>
						</view>
						<view class="house_guang house_gao" @click="tohouseRent">
							<text class="dis_blo" style="font-size: 33rpx;font-weight: bold;padding:20rpx 0 10rpx;">房东直租</text>
							<text>真实房源，中介免费</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="showQuestionnaire" mode="center" :round="15" @close="showQuestionnaire=false">
			<view class="slot-content" style="width:600rpx;text-align: center;padding:0;">
				<image mode="widthFix" style="width:100%;" src="https://resourse.cnlhjt.com/upload/20230109/0c835e8e8ecd1c87a49c53b301121ebc.png"></image>
				<!-- <view style="font-size: 32rpx;font-weight: bold;margin-bottom:30rpx;">{{questiontitle}}</view> -->
				<view style="font-size: 28rpx;padding:20rpx 0;">
					<view>是否去参与问卷调查</view>
					<view>为物业服务提出宝贵意见？</view>
				</view>
				<view class="popup_con" style="">
					<view @click="questioncancel">以后再说</view>
					<view class="btn_view" @click="questionConfirm">立即参与</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="showvote" @close="showvote=false" mode="center" bgColor="transparent">
			<view class="u-rel">
				<image style="width:500rpx;" mode="widthFix" src="https://resourse.cnlhjt.com/upload/20230110/39ba003727427b6ae530b15ca102f474.png" @click="tovote"></image>
				<!-- <view class="u-abso com">{{comment}}</view>
				<view class="u-abso ticket_btn">
					票数：{{ticket}}
				</view> -->
			</view>
			<view style="text-align: center;margin-top:30rpx;">
				<image mode="widthFix" style="width:40rpx;margin:0 auto;" src="https://resourse.cnlhjt.com/upload/20230110/bbab60ff29729617fc29a597ba5b7259.png" @click="showvote=false"></image>
			</view>
		</u-popup>
		
		<u-modal :show="showNotice"  :title="title" confirmColor="#008987" :showCancelButton="true" :closeOnClickOverlay="true" @close="showNotice=false" @cancel="showNotice=false" @confirm="noticeConfirm" cancelText="延期收房" confirmText="准时收房">
			<view class="slot-content" style="text-align: left;width:100%;font-size: 28rpx;">
				<view style="max-height:400rpx;overflow-y: scroll;">
					<view class="u-border-bottom" v-for="(item,index) in delivery" :key="index">
						<view style="padding:10rpx 0;">
							<text style="color:#666;">房号：</text>
							<text>{{item.house}}</text>
						</view>
						<view style="padding:10rpx 0;">
							<text style="color:#666;">业主：</text>
							<text>{{item.name}}</text>
						</view>
						
						<view style="padding:10rpx 0;">
							<text style="color:#666;">交房时间：</text>
							<text>{{item.time.time}}</text>
						</view>
					</view>
				</view>
				<view style="padding:20rpx 0 0;font-size: 26rpx;margin-top:20rpx;" @click="tolink">
					<view style="display: inline-block;">
						<u-icon name="info-circle" color="#008987" size="15"></u-icon>
					</view>
					<text style="color:#008987;margin-left:15rpx;">用户交房须知阅读</text>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getHomeNav,
		getBanner,
		getOneKey,
		getTitle
	} from "@/service/configService.js";
	import {
		getNotice,getDelivery
	} from "@/service/noticeService.js";
	import {
		getServiceItems
	} from "@/service/shareService.js";
	import {
		getHomeShopNav
	} from "@/service/shopservice.js";
	import {
		submitDeliveryRead,getInfo
	} from "@/service/userService.js";
	import {
		getQuestionStatus,getVoteStatus
	} from "@/service/questionService.js";
	import cookie from '@/util/store/cookie.js';
	export default {
		data() {
			return {
				user: {
					
					type: 0,
					home: '去我的绑定房屋'
				},
				isLogin: false,
				
				appTitle: this.$store.state.appTitle,
				bannerList: [],
				bannerCommunityList: [],
				baseList: [],
				notice: [],
				square: "https://resourse.cnlhjt.com/upload/20220825/8fcc7574b7e794b8523fd0f93da44be7.jpg",
				near: [
					{
						nid:1,
						image:'https://resourse.cnlhjt.com/upload/20221219/f72ab5e051f6892bdf046fba831a8d79.png',
						name:'共享格子铺'
					},
					{
						nid:2,
						image:'https://resourse.cnlhjt.com/upload/20221221/b887f4e83cd783a2c43489dda05acfbb.png',
						name:'共享便民'
					},
				],
				shop: [],
				oneKey: [],
				isshop: false,
				isCommunity: false,
				bgColor:{
					backgroundImage: 'linear-gradient(to right,#4CA7AD, #2aaa9f)'
				},
				
				showNotice:false,
				title:'交房信息',
				delivery:[],
				house:'未获取到房产信息',
				username:'业主',
				
				showQuestionnaire:false,
				questiontitle:'问卷调查征集',
				showvote:false,
				
			}
		},
		mounted() {
			if (this.$store.state.isLogin == true) {
				this.isLogin = true;
				this.user = {
					type: this.$store.state.userType,
					home: this.$store.state.home
				}
				getInfo().then(this.getInfo);
				
			}
			
			
			
			getHomeNav().then(this.getHomeNav);
			getBanner().then(this.getBanner);
			getOneKey().then(this.getOneKey);
			getNotice().then(this.getNotice);
			getBanner({
				type: 3
			}).then(this.getBannerCommunity);
			// getServiceItems().then(this.getServiceItems);
			getHomeShopNav().then(this.getHomeShopNav);
			getQuestionStatus().then(this.getQuestionStatus);
			
		},
		methods: {
			getInfo(e){
				if(e.code == 200){
					this.user.type=e.result.type;
					if(e.result.house != ''){
						this.user.home = e.result.house;
						this.$u.vuex('home', e.result.house);
					}else{
						this.user.home = '去我的绑定房产信息';
					}
				}
			},
			getHomeShopNav(e) {
				if (e.code == 200) {
					this.isshop = true;
					this.shop = e.result;
				} else {
					this.isshop = false;
				}
			},
			getDelivery(e){
				if(e.code==200){
					this.showNotice=true;
					this.delivery=e.result;
				}else{
					this.$refs.uToast.show({
						type: 'error',
						title: '失败',
						message: e.msg,
						complete() {
						
						}
					})
				}
			},
			noticeConfirm(){
				submitDeliveryRead().then(res=>{
					if(res.code==200){
						
						this.$refs.uToast.show({
							type: 'success',
							title: '成功',
							message: res.msg,
							complete() {
							
							}
						})
						this.showNotice=false;
					}else{
						this.$refs.uToast.show({
							type: 'error',
							title: '失败',
							message: res.msg,
							complete() {
							
							}
						})
					}
				})
			},
			questionConfirm(){
				this.$u.route({
					url: '/pages/index/questionlink',
					params: {
				
					}
				});
				
				this.showQuestionnaire=false;
			},
			questioncancel(){
				this.showQuestionnaire=false;
				// getVoteStatus().then(this.getVoteStatus);
			},
			getQuestionStatus(e){
				// console.log(e);
				var questionId=cookie.get('questionId');
				if(e.code==200){
					if(questionId != e.result.id){
						this.showQuestionnaire=true;
					}else{
						this.showQuestionnaire=false;
						// getVoteStatus().then(this.getVoteStatus);
					}
				}else{
					this.showQuestionnaire=false;
					// getVoteStatus().then(this.getVoteStatus);
				}
				
			},
			getVoteStatus(e){
				if(e.code==200){
					this.showvote=true;
				}else{
					this.showvote=false;
				}
			},
			tovote(){
				// this.$u.route({
				// 	url: '/pages/vote/votelist',
				// 	params: {
				
				// 	}
				// })
				this.$u.route({
					url: '/pages/vote/voteresult',
					params: {
				
					}
				});
				this.showvote=false;
			},
			// getServiceItems(e) {
			// 	if (e.code == 200) {
			// 		this.near = e.result;
			// 	}
			// },
			getBanner(e) {
				if (e.code == 200) {
					this.bannerList = e.result;
				}
			},
			getBannerCommunity(e) {
				if (e.code == 200) {
					this.bannerCommunityList = e.result;
				}
			},
			getHomeNav(e) {
				if (e.code == 200) {
					this.baseList = e.result;
					for (var i = 0; i < e.result.length; i++) {
						if (e.result[i].method == 'shop') {
							this.isshop = true;
						} else if (e.result[i].method == 'community') {
							this.isCommunity = true;
						}
					}
				}
			},
			getOneKey(e) {
				if (e.code == 200) {
					this.oneKey = e.result;
				}
			},
			getNotice(e) {
				if (e.code == 200) {
					this.notice = e.result;
				}
			},
			navInto(method) {
				// console.log(method);
				switch (method) {
					case 'visit':
						this.$u.route({
							url: '/pagesHome/visit/index',
							params: {

							}
						});
						break;
					case 'live':
						this.$u.route({
							url: '/pagesHome/pay/index',
							params: {

							}
						});
						break;
					case 'repair':
						this.$u.route({
							url: '/pagesHome/repair/index',
							params: {

							}
						});
						break;
					case 'park':
						
						this.$refs.uToast.show({
							type: 'error',
							title: '失败',
							icon:false,
							message: "智慧生活，敬请期待",
						})
						break;
					case 'community':
						this.$u.route({
							url: '/pagesCommunity/index/index',
							params: {

							}
						});
						break;
					case 'shop':
						this.$u.route({
							url: '/pagesShop/index/index',
							params: {}
						});
						break;
					case 'free':
						this.$u.route({
							url: '/pagesHome/news/index',
							params: {

							}
						});
						break;
					case "call":
						this.$u.route({
							url: '/pagesHome/caller/index',
							params: {

							}
						});
						break;
					case "notice":
						getDelivery().then(this.getDelivery);
						break;
					default:
						this.$refs.uToast.show({
							type: 'error',
							title: '失败',
							icon:false,
							message: "智慧生活，敬请期待",
						})
				}
			},
			quick(method) {
				switch (method) {
					case 'door':
						this.$u.route({
							url: '/pagesHome/openDoor/index',
							params: {

							}
						});
						break;
					case 'floor':
						this.$u.route({
							url: '/pagesHome/summon/index',
							params: {
					
							}
						});
						break;
					default:
						this.$refs.uToast.show({
							type: 'error',
							title: '失败',
							icon:false,
							message: "智慧生活，敬请期待",
						})
				}
			},
			tolink(){
				uni.navigateTo({
					url:'./noticelink'
				})
			},
			moreCommunity() {
				if(this.isCommunity){
					this.$u.route({
						url: '/pagesCommunity/index/index',
						params: {
					
						}
					});
				}else{
					this.$refs.uToast.show({
						type: 'error',
						title: '失败',
						icon:false,
						message: "智慧生活，敬请期待",
					})
				}
				
			},
			moreShare() {
				this.$u.route({
					url: '/pages/index/index',
					params: {
						current:3
					}
				});
			},
			moreShop(cut) {
				this.$u.route({
					url: '/pagesShop/index/index',
					params: {
						cut: cut
					}
				});
			},
			lattice() {
				this.$u.route({
					url: '/pagesShare/lattice/index',
					params: {

					}
				});
			},
			shareItem(item) {
				if (item.nid == 1) {
					if(this.isshop){
						this.$u.route({
							url: '/pagesShare/lattice/index',
							params: {
								nid: item.nid,
								image: item.image
							}
						})
					}else{
						this.$refs.uToast.show({
							type: 'error',
							title: '失败',
							icon:false,
							message: "智慧生活，敬请期待",
						})
					}
					
				} else if (item.nid == 2) {
					this.$u.route({
						url: '/pagesShare/tool/index',
						params: {
							nid: item.nid,
							image: item.image
						}
					})
				} else {
					this.$refs.uToast.show({
						type: 'error',
						title: '失败',
						icon:false,
						message: "智慧生活，敬请期待",
					})
				}

			},
			intoBanner(index) {
				let id = this.bannerList[index].id;
				this.$u.route({
					url: '/pagesHome/index/article',
					params: {
						id: id
					}
				})
			},
			intoBanner1(index) {
				let id = this.bannerCommunityList[index].id;
				this.$u.route({
					url: '/pagesHome/index/article',
					params: {
						id: id
					}
				})
			},
			tohouseRent(){
				this.$u.route({
					url: '/pagesHome/houseRent/houseRent',
					params: {
						// id: id
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
	}
	.head_main{
		position: fixed;
		top:0;
		left:0;
		width:100%;
		z-index:999;
	}
	.intro_i{
		bottom:15rpx;left:20rpx;border-radius:30rpx;color:#fff;background-color: rgba(0, 0, 0, 0.5);padding:5rpx 20rpx;
		font-size: 26rpx;
	}
	.main-service {
		background-color: transparent;
		box-shadow: none;
	}

	.main-service .title {
		padding-left: 0;
		background-position: 0% 85%;
	}

	.wrap {
		width: 94%;
		padding-left: 3%;
		padding-right: 3%;
		padding-bottom: 20rpx;
	}

	.iconType {
		display: flex;
		background-color: #FFFFFF;
		justify-content: space-between;
	}

	.icon {
		/* width:9%; */
		height: auto;
	}

	.item {
		/* display: flex;
		flex-direction: column;
		align-items: center; */
		color: #13227a;
		width: 48%;
		font-size: 28rpx;
	}

	.g_list {
		width: 30%;
		background-color: #fff;
		padding: 20rpx 0;
		border-radius: 20rpx;
	}

	.notice_img {
		width: 54rpx;
		height: 60rpx;
		/* top:25rpx;left:10rpx; */
		background-color: #fff;
		border-right: 1rpx solid #ddd;
		padding: 0 20rpx;
	}
	
	.house_con{
		background-image: url('https://resourse.cnlhjt.com/upload/20221220/7358007d4636a5fc73e0f631f2e650e9.png');
		background-size: 100% 100%;
		background-position: center center;
		border-radius: 10rpx;
		overflow: hidden;
		padding:30rpx;
		font-size: 20rpx;
		margin-top:20rpx;
	}
	.house_guang{
		width:28%;
		height:150rpx;
		padding-left:20%;
		background-image: url('https://resourse.cnlhjt.com/upload/20221220/e66cc4b032b098508133e21ebc8a42dc.png');
		background-size: 100% 100%;
		background-position: center center;
		border-radius: 10rpx;
		color:#0d515c;
	}
	.house_gao{
		background-image: url('https://resourse.cnlhjt.com/upload/20221220/c5897fa8a9520e47c5c605e063fa0699.png');
	}
	
	.popup_con{
		display: flex;padding:40rpx 20rpx;justify-content: space-around;border-top:1rpx solid #f8f8f8;
		
		view{
			width:40%;padding:10rpx 0;text-align: center;border-radius: 40rpx;background-color: #f8f8f8;
		}
		.btn_view{
			background-color: #00828A;color:#fff;
		}
	}
</style>
